import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store'
import {
  HeaderWrapper,
  Nav,
  NavItem,
  SearchWrapper,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button,
  Img
} from './style';

class Header extends Component {
  state = {
    showCodeImage: false,
    hightColor: ''
  }

  getListArea() {
    const { focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props;
    const newList = list.toJS();
    const pageList = [];

    if (newList.length) {
      for (let i = (page - 1) * 10; i < page * 10; i++) {
        pageList.push(
          <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        )
      }
    }

    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
						<SearchInfoSwitch
              onClick={() => handleChangePage(page, totalPage, this.spinIcon)}
            >
              <i ref={(icon) => { this.spinIcon = icon }} className="iconfont spin">&#xe851;</i>
							换一批
						</SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null;
    }
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }

  handleScroll = () => {
    let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
    if (scrollTop > 100) {
      this.setState({
        hightColor: '#ce5e8a'
      })
    } else {
      this.setState({
        hightColor: 'white'
      })
    }
  }

  render() {
    const { focused, handleInputFocus, handleInputBlur, list, login, logout } = this.props;
    return (
      <Router>
        <HeaderWrapper style={{ backgroundColor: this.state.hightColor }}>
          <Link to='/'>
            {/* <Logo /> */}
          </Link>
          <Nav>
            <a href='#/'>
              <NavItem className='left active'>首页</NavItem>
            </a>
            <NavItem className='left' onClick={() => { this.setState({ showCodeImage: !this.state.showCodeImage }) }}>扫描使用小程序</NavItem>
            {
              this.state.showCodeImage ? <Img src="https://z3.ax1x.com/2021/06/06/2UdCp4.jpg" /> : null
            }
            {
              login ?
                <NavItem onClick={logout} className='right'>退出</NavItem> :
                <a href='#/login'><NavItem className='right'>登陆</NavItem></a>
            }
            <NavItem className='right'>
              <i className="iconfont">&#xe65a;</i>
            </NavItem>
            <SearchWrapper>
              <CSSTransition
                in={focused}
                timeout={200}
                classNames="slide"
              >
                <NavSearch
                  className={focused ? 'focused' : ''}
                  onFocus={() => handleInputFocus(list)}
                  onBlur={handleInputBlur}
                ></NavSearch>
              </CSSTransition>
              <i
                className={focused ? 'focused iconfont' : 'iconfont'}>&#xe6fa;</i>
              {this.getListArea()}
            </SearchWrapper>
          </Nav>
          <Addition>
            <a href='#/writter'>
              <Button className='writting'>执笔</Button>
            </a>
            <a href="#/register">
              <Button className='reg'>注册</Button>
            </a>
          </Addition>
        </HeaderWrapper>
      </Router>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    login: state.getIn(['login', 'login'])
  }
}

const mapDispathToProps = (dispatch, ownProps) => {
  return {
    handleInputFocus(list) {
      (list.size === 0) && dispatch(actionCreators.getList());
      dispatch(actionCreators.searchFocus());
    },
    handleInputBlur() {
      dispatch(actionCreators.searchBlur());
    },
    handleMouseEnter() {
      dispatch(actionCreators.mouseEnter());
    },
    handleMouseLeave() {
      dispatch(actionCreators.mouseLeave());
    },
    handleChangePage(page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
      if (originAngle) {
        originAngle = parseInt(originAngle, 10);
      } else {
        originAngle = 0;
      }
      spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';

      if (page < totalPage) {
        dispatch(actionCreators.changePage(page + 1));
      } else {
        dispatch(actionCreators.changePage(1));
      }
    },
    logout() {
      dispatch(loginActionCreators.logout())
    }
  }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);
